<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <script>
        function renewValidateCode() {
            var img = document.getElementById("img");
            var src = img.getAttribute("src");
            var param = GetQueryString("width", src);
            var src_=""
            if (param!=null){
                src = src.split("?")[0]+"?width="+param;
                 src_ = src + '&rnd=' + Math.random();
            }else{
                 src_ = src + '?rnd=' + Math.random();
            }
            img.src = src_;

        }


        function GetQueryString(name, url) {
            var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
            var url = url.split("?");
            if (url[1]===undefined)
                return null;
            var r = url[1].substr(0).match(reg);//search,查询？后面的参数，并匹配正则
            if (r != null)
                return unescape(r[2]);
            return null;

        }

    </script>
</head>
<body>
<h2>标准登录页面</h2>
<h3>表单登录</h3>
<form action="/authentication/form" method="post">
    <table>
        <tr>
            <td>用户名:</td>
            <td><input type="text" name="username"></td>
        </tr>
        <tr>
            <td>密码:</td>
            <td><input type="password" name="password"></td>
        </tr>
        <tr>
            <td>图形验证码:</td>
            <td>
                <input type="text" name="imageCode">
                <img src="/code/image?width=200" id="img" onclick="renewValidateCode()">
            </td>
        </tr>
        <tr>
            <td colspan='2'><input name="remember-me" type="checkbox" value="true" />记住我</td>
        </tr>
        <tr>
            <td colspan="2">
                <button type="submit">登录</button>
            </td>
        </tr>
    </table>
</form>

<h3>短信登录</h3>
<form action="/authentication/mobile" method="post">
    <table>
        <tr>
            <td>手机号:</td>
            <td><input type="text" name="mobile" value="13012345678"></td>
        </tr>
        <tr>
            <td>短信验证码:</td>
            <td>
                <input type="text" name="smsCode">
                <a href="/code/sms?mobile=13012345678">发送验证码</a>
            </td>
        </tr>
        <tr>
            <td colspan='2'><input name="remember-me" type="checkbox" value="true" />记住我</td>
        </tr>
        <tr>
            <td colspan="2"><button type="submit">登录</button></td>
        </tr>
    </table>
</form>
<br>

<h3>社交登录</h3>
<a href="/qqLogin/callback.do">QQ登录</a>
&nbsp;&nbsp;&nbsp;&nbsp;


<a href="/qqLogin/weixin">微信登录</a>
</body>
</html>